<!-- 习题练习页面 -->
<template>
  <view>
    <!-- 背景图 -->
    <view class="exerc-back">
      <image src="/static/exerc/back.png" mode="widthFix" />
    </view>
    <view class="exerc-content"
          :style="{ bottom: showExerc ? '116upx' : '0' }">
      <!-- 顶部选项卡 -->
      <view class="exerc-tab module-back su-sticky">
        <!-- 答题时间 -->
        <text class="exerc-timer">
          <text class="wkfont ticon">&#xe65f;</text>
          <text class="text-time">
            <text v-if="minutes < 10">0{{ minutes }}:</text>
            <text v-else>{{ minutes }}:</text>
            <text v-if="seconds < 10">0{{ seconds }}</text>
            <text v-else>{{ seconds }}</text>
          </text>
        </text>
        <!-- 答题卡 -->
        <text class="exerc-sheet" @click="showExerc = !showExerc">
          <text class="wkfont dticon">&#xe617;</text>
          <text :class="[!showExerc?'select':'']">答题卡</text>
        </text>
      </view>
      <!-- 题目信息 -->
      <swiper class="exerc-swiper" :circular="false"
              :indicator-dots="false" :current="swiperIndex"
              :autoplay="false" v-if="showExerc"
              @change="swiperChange">
        <swiper-item v-for="(item, index) in exercList" :key="item.name"
                     :item-id="item.name">
          <answer-item :item-data="item" :item-index="index"
                      :exerc-config="exercConfig" @select="itemSelect"/>
        </swiper-item>
      </swiper>
      <!-- 答题卡 -->
      <answer-sheet v-else :exerc-list="exercList" @select="sheetSelect"/>
    </view>
  </view>
</template>
<script>
/**
 * 习题练习页面
 */
import AnswerItem from './comp/answer-item.vue'
import answerSheet from './comp/answer-sheet.vue'
export default {
  components: { AnswerItem, answerSheet },
  data() {
    return {
      showExerc: true,
      // 题目列表
      exercList: [],
      // 习题配置信息
      exercConfig: {},
      minutes: 0,
      seconds: 0,
      // 当前索引
      swiperIndex: 0,
      id: null,
    }
  },
  onLoad({ id }) {
    this.id = id
    this.$nextTick(e => this.queryExerc())
  },
  onNavigationBarButtonTap() {
    this.$as.message('左右滑动可切换题目', 'info')
  },
  computed: {
    // 判断是否作答完毕
    isAnswered() {
      let result = true
      this.exercList.forEach(p => {
        if (!p.select) {
          result = false
        }
      })
      return result
    }
  },
  methods: {
    queryExerc() {
      this.handleExerc()
    },
    async handleExerc() {
      const detail = await this.$api.getUserPracticeRecord({ id: this.id })
      this.exercConfig = {
        exercConfig: detail.num,
        ...detail
      }
      // 计算完成时间 start_time 和 end_time
      let startTime = new Date(detail.start_time).getTime()
      let endTime = new Date(detail.end_time).getTime()
      let time = endTime - startTime
      let minutes = Math.floor(time / 1000 / 60)
      let seconds = Math.floor(time / 1000 % 60)
      this.minutes = minutes
      this.seconds = seconds
      /**
       *
       */
      this.exercList = detail.UserPractices.map(recordItem => {
        let _correct = recordItem.Question.QuestionOptions.filter(item => item.is_correct)
        _correct = _correct.map(item => item.value)
        console.log('_correct',_correct)
        let _correctValue = ''
        if (_correct.length > 1) {
          _correctValue = _correct
        } else if (_correct.length === 1){
          console.log('_correct.length')
          _correctValue = _correct[0]
        }
        console.log('_correctValue',_correctValue)
        let labelMap = {
          'single_choice': 'radio',
          'multiple_choice': 'multiple',
        }
        return {
          id: recordItem.id,
          correct: _correctValue,
          is_correct: recordItem.is_correct,
          errorRes:"无",
          label: labelMap[recordItem.Question.type],
          name: recordItem.id,
          select: recordItem.selected_option,
          score: recordItem.Question.score || 1,
          topic: recordItem.Question.name,
          type: labelMap[recordItem.Question.type],
          optionItems: recordItem.Question.QuestionOptions.map(item => {
            return {
              label: item.name,
              value: item.value
            }
          })
        }
      })
      console.log(this.exercList)
    },
    // 题目选择
    itemSelect(data) {
      if (data.index + 1 === this.exercConfig.num )
        return
      this.swiperIndex = data.index + 1
    },
    // 提交题目
    submitExerc() {
      let sbExerc = () => {
        this.$api.submitUserPracticeRecord({
          id: this.id,
          list: this.exercList.map(item => {
            let is_correct = false
            if (Array.isArray(item.correct)) {
              is_correct = item.correct.join(',') === item.select.join(',')
            } else {
              is_correct = item.correct === item.select
            }
            return {
              id: item.id,
              is_correct: is_correct ? 1 : 0,
              score: item.score
            }
          })
        }).then(res => {
          uni.redirectTo({
            url: '/pages/question/detail/result?id=' + this.id
          })
        })
      }
      if (!this.isAnswered) {
        uni.showModal({
          title: '温馨提示',
          content: `当前练习题还没有做完`
              + `是否继续提交？`,
          confirmColor: '#0B56B1',
          success: (e) => {
            if (e.confirm) {
              sbExerc()
            }
            if (e.cancel) {
            }
          }
        })

      } else {
        sbExerc()
      }
    },
    swiperChange(event) {
      const { current } = event.detail
      this.swiperIndex = current
    },
    // 答题卡选择
    sheetSelect(index) {
      this.swiperIndex = index
      this.showExerc = true
    },
  }
}

</script>

<style lang="scss" scoped>
@import "../index.scss";
</style>
